<template>
  <div class="indexPage">
    <el-carousel class="banner">
      <el-carousel-item v-for="item in 4" :key="item">
        <img src="./../assets/images/banner01.png">
      </el-carousel-item>
    </el-carousel>
    <div class="about">
      <div class="inner">
        <div class="left">
          <h2>关于昆特</h2>
          <h3>About Us</h3>
          <h4>专注于天气风险解决方案，<br>服务网络遍布全球。</h4>
          <p>昆特科技是一家专注于天气风险服务的国家高新技术企业，是一家为自然灾害防御提供解决方案，并充分利用气象与水文大数据开展商业应用的民营企业，案例遍布全国23个省份约1150个县区。公司研发中心总部设置于成都（下辖北京、深圳、南京、海口、沈阳、兰州、武汉等七个研发分部），并配置有数据研究院与培训中心。公司的基础业务，围绕天气大数据的监测采集、模式处理、结果发布，服务于应急管理、智慧城市、智慧社区、互联网+水利、农业金融、旅游/生态、智慧校园、新能源、航空/码头等领域。</p>
          <router-link tag='a' :to="{path:'/gykt'}" >
            <img src="../assets/images/more.png" alt=""/>
          </router-link>
        </div>
        <div class="right" @click="wrapShow">
          <img :src='videoImg'/>
          <img class="play" src="../assets/images/play.png"/>
        </div>
      </div>
    </div>
    <div :class="[videoWrap]" @click="wrapHide">
      <video @click.stop controls="controls" :src ='videoSrc' :poster='videoImg'></video>
    </div>
    <div class="industry">
      <div class="inner">
        <h2>行业应用</h2>
        <h3>Industry Application</h3>
        <h4>融汇不同领域，提供多元化服务。<br>覆盖行业广泛。</h4>
        <router-link tag='a' :to="{path:'/hyyy'}" >
          <img class='more' src="../assets/images/more.png" alt=""/>
        </router-link>
        <el-carousel indicator-position="outside" arrow="always" :autoplay=false class="industryList">
          <el-carousel-item v-for="items in industry" :key='items.page'>
            <ul>
              <li v-for='item in items.data' :key='item.id'>
                <router-link tag='a' :to='item.to' >
                  <div>
                    <img :src='item.icon' alt="">
                    <h5>{{item.title}}</h5>
                    <p>{{item.text}}</p>
                    <span>More</span>
                  </div>
                </router-link>
              </li>
            </ul>
          </el-carousel-item>
        </el-carousel>
         <p class='zzy'>专注于天气风险服务的国家高新技术企业，是为自然灾害防御提供解决方案。</p>
         <div class="industryListArr">
         </div>
      </div>
    </div>
    <div class="else">
      <img :src='elseImgUrl' alt="">
    </div>
    <div class="product">
      <div class="inner">
        <h2>产品中心</h2>
        <h3>Product Center</h3>
        <h4>应急管理、智慧社区、水利水文、旅游生态、<br>航空码头等系统平台。</h4>
        <img class='more' src="../assets/images/more.png" alt=""/>
        <el-carousel indicator-position="outside" arrow="always" :autoplay=false class="productList">
          <el-carousel-item v-for="items in product" :key='items.page'>
            <ul>
              <li v-for='item in items.data' :key='item.id'>
                <!-- <router-link tag='a' :to='item.to' > -->
                  <div>
                    <img class='product-title' :src='item.icon' alt="">
                    <h5>{{item.title}}</h5>
                    <p>{{item.text}}</p>
                  </div>
                  <img class='product-icon' src="../assets/images/industryListArr.png" alt="">
                <!-- </router-link> -->
              </li>
            </ul>
          </el-carousel-item>
        </el-carousel>
         <div class="industryListArr">
         </div>
      </div>
    </div>
    <div class="classic">
      <div class="inner">
        <h2>经典案例</h2>
        <h3>Classic Case</h3>
        <h4>服务案例，<br>分布全国23个省份。</h4>
        <img class='more' src="../assets/images/more.png" alt=""/>
        <ul>
          <li v-for='item in classic' :key='item.id'>
            <!-- <router-link tag='a' :to='item.to'> -->
              <div class="cur">
                <div class="classic-front">
                  <img :src='item.icon'>
                  <div class="classic-mask">
                    <img v-if='item.id==3||item.id==4||item.id==9||item.id==10' :src='classicImg'>
                  </div>
                </div>
                <div class="classic-bottom">
                  <img :src='item.icon'>
                  <div class="classic-mask">
                    <h6>{{item.title}}</h6>
                    <p>{{item.text}}</p>
                    <span>查看详情</span>
                  </div>
                </div>
              </div>
            <!-- </router-link> -->
          </li>
        </ul>
      </div>
    </div>
    <div class='contactUs'>
      <div class="inner">
        <p>联系我们</p>
        <p>Contact Us</p>
        <div class="left">
          <el-input placeholder="您的姓名" v-model="yourName" clearable></el-input>
          <el-input placeholder="您的电话" v-model="yourTel" clearable></el-input>
          <el-input placeholder="您的需求" v-model="yourDem" clearable></el-input>
          <input class='save' type="button" value="提交">
          <span>感谢您的在线反馈，我们会尽快与您联系。</span>
        </div>
        <div class="right">
          <img src="../assets/images/tel.png">
          <p>{{tel}}</p>
          <p>全国服务热线</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  data () {
    return {
      videoWrap: 'videoWrapHide',
      videoImg: 'http://120.78.209.238:8086/ylt/images/950fdf03926e079b4153d83b110766ed.png',
      videoSrc: 'http://120.78.209.238:8086/ylt/images/950fdf03926e079b4153d83b110766ed.mp4',
      pointArr1: 'active',
      pointArr2: null,
      aplay: 'autoplay',
      banner: [
        {
          id: 0,
          imgUrl: require('./../assets/images/banner01.png')
        }
      ],
      industry: [
        {
          page: 0,
          data: [
            {
              icon: require('../assets/images/hyyy01.png'),
              title: '应急指挥',
              text: '在应急指挥中采用高清的视频和语音对讲，能够将故障现场的视频调度到指挥中心，辅助做出更好的应急决策。',
              to: 'yjzh'
            },
            {
              icon: require('../assets/images/hyyy02.png'),
              title: '智慧农业',
              text: '智慧农业是智慧经济主要的组成部分，是发展中国家消除贫困、实现后发优势、经济发展后来居上的主要途径。',
              to: 'zhny'
            },
            {
              icon: require('../assets/images/hyyy03.png'),
              title: '城市管理',
              text: '智慧社区是用物联网、云计算、移动互联网等新一代技术的集成应用，为居民社区提供安全，舒适智慧化的生活环境',
              to: 'csgl'
            },
            {
              icon: require('../assets/images/hyyy04.png'),
              title: '水文水利',
              text: '依托中国气象局精细化权威气象降水预报数据，结合降雨~洪水预报模型，开展短期、中期降雨洪水一体化预报服务。',
              to: 'swsl'
            }
          ]
        },
        {
          page: 1,
          data: [
            {
              icon: require('../assets/images/hyyy05.png'),
              title: '海洋/码头',
              text: '码头是海边、江河边专供轮船或渡船停泊，让乘客上下、货物装卸的建筑物。通常见于水陆交通发达的商业城市。',
              to: 'yjzh2'
            },
            {
              icon: require('../assets/images/hyyy06.png'),
              title: '校园/科普',
              text: '指通过将建筑物的结构、系统、服务进行最优化组合，从而为用户提供一个高效、舒适、便利的人性化建筑环境。',
              to: 'yjzh3'
            },
            {
              icon: require('../assets/images/hyyy07.png'),
              title: '建筑智能',
              text: '应用气象学是将气象学的原理、方法和成果应用于农业、水文、航海、航空、军事、医疗等方面，形成的边缘性学科。',
              to: 'yjzh4'
            },
            {
              icon: require('../assets/images/hyyy08.png'),
              title: '气象综合应用',
              text: '在应急指挥中采用高清的视频和语音对讲，能够将故障现场的视频调度到指挥中心，辅助做出更好的应急决策。',
              to: 'yjzh5'
            }
          ]
        }
      ],
      product: [
        {
          page: 0,
          data: [
            {
              id: '01',
              icon: require('../assets/images/cp1.png'),
              title: '生态站展示平台',
              text: '平台主要内容包括：旅游业、基金相关的整合发布；景区、旅游路线的全面介绍；景区门票、住宿的预订和特色农产品在线购买；基金管理委员会的成员介绍；中国天然氧吧相关的研讨会、培训班资讯。',
              to: 'yjzh'
            },
            {
              id: '02',
              icon: require('../assets/images/cp2.png'),
              title: '海洋监测与预报平台',
              text: '通过研究遥感，全球定位，地理信息技术与渔业相结合，解决渔业空间分布不均，渔民安全难以得到保障，信息不能及时传递等问题。通过建立渔业通讯和导航综合指挥系统等高新技术加速了渔业生产现代化。',
              to: 'yjzh'
            },
            {
              id: '03',
              icon: require('../assets/images/cp3.png'),
              title: '分布式会商业务平面',
              text: '分布式会商平面设计与建设系统提供基于音频、视频、传输、控制等功能集一身的平台，它包括会商音频互通、会商设备控制及多种会商模式切换等功能，是完美契合气象局综合业务平台业务需求的一套系统。',
              to: 'yjzh'
            }
          ]
        },
        {
          page: 1,
          data: [
            {
              id: '01',
              icon: require('../assets/images/cp1.png'),
              title: '生态站展示平台',
              text: '平台主要内容包括：旅游业、基金相关的整合发布；景区、旅游路线的全面介绍；景区门票、住宿的预订和特色农产品在线购买；基金管理委员会的成员介绍；中国天然氧吧相关的研讨会、培训班资讯。',
              to: 'yjzh'
            },
            {
              id: '02',
              icon: require('../assets/images/cp2.png'),
              title: '海洋监测与预报平台',
              text: '通过研究遥感，全球定位，地理信息技术与渔业相结合，解决渔业空间分布不均，渔民安全难以得到保障，信息不能及时传递等问题。通过建立渔业通讯和导航综合指挥系统等高新技术加速了渔业生产现代化。',
              to: 'yjzh'
            },
            {
              id: '03',
              icon: require('../assets/images/cp3.png'),
              title: '分布式会商业务平面',
              text: '分布式会商平面设计与建设系统提供基于音频、视频、传输、控制等功能集一身的平台，它包括会商音频互通、会商设备控制及多种会商模式切换等功能，是完美契合气象局综合业务平台业务需求的一套系统。',
              to: 'yjzh'
            }
          ]
        }
      ],
      elseImgUrl: require('../assets/images/else.png'),
      classic: [
        {
          id: 1,
          to: 'st',
          icon: require('../assets/images/jd01.png'),
          title: '生态与旅游系统平台1',
          text: '平台主要对中国天然氧吧基金进行推广介绍并为中国天然氧吧景区的旅游、农业、生态资源提供线上交易渠道。平台主要对中国天然氧吧基金进行推广介绍并为中国天然氧吧景区的旅游、农业、生态资源提供线上交易渠道。'
        },
        {
          id: 2,
          to: 'st',
          icon: require('../assets/images/jd02.png'),
          title: '生态与旅游系统平台2',
          text: '平台主要对中国天然氧吧基金进行推广介绍并为中国天然氧吧景区的旅游、农业、生态资源提供线上交易渠道。'
        },
        {
          id: 3,
          to: 'st',
          icon: require('../assets/images/jd03.png'),
          title: '生态与旅游系统平台3',
          text: '平台主要对中国天然氧吧基金进行推广介绍并为中国天然氧吧景区的旅游、农业、生态资源提供线上交易渠道。'
        },
        {
          id: 4,
          to: 'st',
          icon: require('../assets/images/jd04.png'),
          title: '生态与旅游系统平台4',
          text: '平台主要对中国天然氧吧基金进行推广介绍并为中国天然氧吧景区的旅游、农业、生态资源提供线上交易渠道。'
        },
        {
          id: 5,
          to: 'st',
          icon: require('../assets/images/jd05.png'),
          title: '生态与旅游系统平台5',
          text: '平台主要对中国天然氧吧基金进行推广介绍并为中国天然氧吧景区的旅游、农业、生态资源提供线上交易渠道。'
        },
        {
          id: 6,
          to: 'st',
          icon: require('../assets/images/jd06.png'),
          title: '生态与旅游系统平台6',
          text: '平台主要对中国天然氧吧基金进行推广介绍并为中国天然氧吧景区的旅游、农业、生态资源提供线上交易渠道。'
        },
        {
          id: 7,
          to: 'st',
          icon: require('../assets/images/jd07.png'),
          title: '生态与旅游系统平台7',
          text: '平台主要对中国天然氧吧基金进行推广介绍并为中国天然氧吧景区的旅游、农业、生态资源提供线上交易渠道。'
        },
        {
          id: 8,
          to: 'st',
          icon: require('../assets/images/jd08.png'),
          title: '生态与旅游系统平台8',
          text: '平台主要对中国天然氧吧基金进行推广介绍并为中国天然氧吧景区的旅游、农业、生态资源提供线上交易渠道。'
        },
        {
          id: 9,
          to: 'st',
          icon: require('../assets/images/jd09.png'),
          title: '生态与旅游系统平台9',
          text: '平台主要对中国天然氧吧基金进行推广介绍并为中国天然氧吧景区的旅游、农业、生态资源提供线上交易渠道。'
        },
        {
          id: 10,
          to: 'st',
          icon: require('../assets/images/jd10.png'),
          title: '生态与旅游系统平台10',
          text: '平台主要对中国天然氧吧基金进行推广介绍并为中国天然氧吧景区的旅游、农业、生态资源提供线上交易渠道。'
        },
        {
          id: 11,
          to: 'st',
          icon: require('../assets/images/jd11.png'),
          title: '生态与旅游系统平台11',
          text: '平台主要对中国天然氧吧基金进行推广介绍并为中国天然氧吧景区的旅游、农业、生态资源提供线上交易渠道。'
        },
        {
          id: 12,
          to: 'st',
          icon: require('../assets/images/jd12.png'),
          title: '生态与旅游系统平台11',
          text: '平台主要对中国天然氧吧基金进行推广介绍并为中国天然氧吧景区的旅游、农业、生态资源提供线上交易渠道。'
        }
      ],
      classicImg: require('../assets/images/case.png'),
      yourName: '',
      yourTel: '',
      yourDem: '',
      tel: '400-716-5998'
    }
  },
  methods: {
    wrapHide (e) {
      this.videoWrap = 'videoWrapHide'
      this.videoSrc = ''
    },
    wrapShow (e) {
      this.videoWrap = 'videoWrapShow'
      this.videoSrc = 'http://120.78.209.238:8086/ylt/images/950fdf03926e079b4153d83b110766ed.mp4'
    },
    industryArr () {
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
.indexPage{
  .banner{
    /deep/.el-carousel__container{
      height: 780px;
    }
    /deep/.el-carousel__indicators--outside{
      position:none;
    }
  }
  .about{
    background: #ffffff;
    padding: 80px 0;
    .inner{
      position:relative;
      width: 1200px;
      margin: 0 auto;
      height: 433px;
      .left{
        position:absolute;
        left:0;
        top:0;
        width: 700px;
        h2{
          font-size: 52px;
          color: #4EBDD5;
          font-weight: bold;
        }
        h3{
          font-size: 28px;
          color: #4EBDD5;
          font-weight: bold;
          line-height: 80px;
        }
        h4{
          font-size: 24px;
          color: #333333;
          font-weight: bold;
          line-height: 40px;
        }
        p{
          padding-top: 20px;
          font-size: 14px;
          color: #666666;
          line-height: 30px;
        }
        img{
          margin-top: 50px;
          width: 100px;
          height:40px;
        }
      }
      .right{
        position:absolute;
        right:0;
        top:100px;
        margin-left: 64px;
        width:432px;
        height:283px;
        border-radius:10px;
        overflow:hidden;
        img{
          width:100%;
          height:100%;
          &.play{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            z-index: 100;
            width: 80px;
            height: 80px;
          }
        }
      }
    }
  }
  .videoWrapShow{
    position:fixed;
    left:0;
    top:0;
    z-index:100;
    width:100vw;
    height:100vh;
    background: rgba(0,0,0,0.8);
    video{
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
    }
  }
  .videoWrapHide{
    display: none;
  }
  .industry{
    background: #F3F3F3;
    padding: 80px 0;
    width: 100%;
    min-width: 1200px;
    .inner{
      position:relative;
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;
      h2{
        font-size: 52px;
        color: #4EBDD5;
        font-weight: bold;
      }
      h3{
        font-size: 28px;
        color: #4EBDD5;
        font-weight: bold;
        line-height: 80px;
      }
      h4{
        font-size: 24px;
        color: #333333;
        font-weight: bold;
        line-height: 50px;
      }
      .more{
        position:absolute;
        right:0;
        top:60px;
        width: 100px;
        height:40px;
      }
      .industryList{
        /deep/.el-carousel__container{
          width: 1200px;
          height: 370px;
          margin: 50px 0 80px 0;
          .el-carousel__arrow--left{
            display: none;
          }
          .el-carousel__arrow--right{
            top: 127%;
            width: 80px;
            height: 80px;
            opacity: 1;
            background-image: url('../assets/images/industryArr.png');
            background-size: 100% 100%;
            border-radius: 40px 30px 40px 40px;
              &:hover{
              opacity: 1;
              background-image: url('../assets/images/industryArrHide.png');
              background-size: 100% 100%;
            }
            i{
              opacity: 0;
            }
          }
          ul{
            overflow: hidden;
            height:370px;
            padding:10px 0;
            li{
              text-align: center;
              width: 230px;
              height: 350px;
              float: left;
              margin-right: 93px;
              background: #ffffff;
              border-radius: 50px;
              cursor: pointer;
              &:last-of-type{
                margin-right: 0;
              }
              div{
                padding: 30px 24px;
                img{
                  width: 60px;
                  height: 60px;
                }
                h5{
                  position: relative;
                  margin:18px 0;
                  color: #333333;
                  font-size: 26px;
                  &:after{
                    content: '';
                    position: absolute;
                    bottom:-13px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 50px;
                    height: 2px;
                    background: #999999;
                  }
                }
                p{
                  color: #666666;
                  height: 120px;
                  font-size: 14px;
                  line-height:30px;
                  text-align: left;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 4;
                  overflow: hidden;
                  letter-spacing: 0px;
                  margin-bottom: 24px
                }
                span{
                  padding-top:20px;
                  color:#4EBDD5;
                  border-bottom:solid 1px #4EBDD5;
                }
              }
              &:hover{
                margin-top:-4px;
                box-shadow:0px 2px 13px 2px rgba(78, 189, 213, 0.08);
              }
            }
          }
        }
        /deep/.el-carousel__indicators{
          text-align: right;
          margin-right: 100px;
          .el-carousel__indicator{
            margin-right: 20px;
            margin-bottom:30px;
            button{
              width: 20px;
              height: 20px;
              border-radius: 50%;
            }
          }
          &.el-carousel__indicators--outside{
            .is-active{
              button{
                background-color: #4EBDD5;
              }
            }
          }
        }
      }
      .zzy{
        font-size:14px;
        color:#666666;
        margin-top:-100px;
        line-height:100px;
      }
    }
  }
  .else{
    min-width: 1200px;
    img{
      width: 100%;
    }
  }
  .product{
    background: #F3F3F3;
    padding: 80px 0;
    width: 100%;
    min-width: 1200px;
    .inner{
      position:relative;
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;
      h2{
        font-size: 52px;
        color: #4EBDD5;
        font-weight: bold;
      }
      h3{
        font-size: 28px;
        color: #4EBDD5;
        font-weight: bold;
        line-height: 80px;
      }
      h4{
        font-size: 24px;
        color: #333333;
        font-weight: bold;
        line-height: 50px;
      }
      .more{
        position:absolute;
        right:0;
        top:60px;
        width: 100px;
        height:40px;
      }
      .productList{
        /deep/.el-carousel__container{
          width: 1200px;
          height: 490px;
          margin: 50px 0 80px 0;
          .el-carousel__arrow--left{
            display: none;
          }
          .el-carousel__arrow--right{
            top: 120%;
            width: 80px;
            height: 80px;
            opacity: 1;
            background-image: url('../assets/images/industryArr.png');
            background-size: 100% 100%;
            border-radius: 40px 30px 40px 40px;
              &:hover{
              opacity: 1;
              background-image: url('../assets/images/industryArrHide.png');
              background-size: 100% 100%;
            }
            i{
              opacity: 0;
            }
          }
          ul{
            overflow: hidden;
            height:470px;
            padding:10px 0;
            li{
              position: relative;
              text-align: center;
              width: 384px;
              height: 450px;
              float: left;
              margin-right: 24px;
              background: #ffffff;
              border-radius: 10px;
              cursor: pointer;
              &:last-of-type{
                margin-right: 0;
              }
              div{
                .product-title{
                  width: 384px;
                  height:223px;
                }
                h5{
                  font-size: 26px;
                  font-weight: bold;
                  color: #333333;
                  font-family: 'PingFang-SC-Bold';
                  line-height: 85px;
                }
                p{
                  font-size: 14px;
                  color: #666666;
                  padding: 0 30px;
                  text-align: left;
                  line-height: 25px;
                  width: 322px;
                  height: 100px;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 4;
                  overflow: hidden;
                  letter-spacing: 0px;
                }
              }
              .product-icon{
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translate(-50%,50%);
                display: block;
                width: 50px;
                height: 50px;
                background: #4EBDD5;
                border-radius: 50%;
              }
              &:hover{
                margin-top:-4px;
                box-shadow:0px 2px 13px 2px rgba(78, 189, 213, 0.08);
              }
            }
          }
        }
        /deep/.el-carousel__indicators{
          text-align: right;
          margin-right: 100px;
          .el-carousel__indicator{
            margin-right: 20px;
            margin-bottom:30px;
            button{
              width: 20px;
              height: 20px;
              border-radius: 50%;
            }
          }
          &.el-carousel__indicators--outside{
            .is-active{
              button{
                background-color: #4EBDD5;
              }
            }
          }
        }
      }
      .zzy{
        font-size:14px;
        color:#666666;
        margin-top:-100px;
        line-height:100px;
      }
    }
  }
  .classic{
    background: #ffffff;
    padding: 80px 0;
    width: 100%;
    min-width: 1200px;
    .inner{
      position:relative;
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;
      h2{
        font-size: 52px;
        color: #4EBDD5;
        font-weight: bold;
      }
      h3{
        font-size: 28px;
        color: #4EBDD5;
        font-weight: bold;
        line-height: 80px;
      }
      h4{
        font-size: 24px;
        color: #333333;
        font-weight: bold;
        line-height: 50px;
      }
      .more{
        position:absolute;
        right:0;
        top:60px;
        width: 100px;
        height:40px;
      }
      ul{
        margin-top: 50px;
        overflow: hidden;
        li{
          float: left;
          width: 200px;
          height: 200px;
          overflow: hidden;
          cursor: pointer;
          .cur{
            transform-style:preserve-3d;
            position: relative;
            width: 200px;
            height: 200px;
            transition: 0.3s;
            div{
              position: absolute;
              left: 0;
              top: 0;
              width: 200px;
              height:200px;
              &.classic-front{
                position: relative;
                .classic-mask{
                  width:200px;
                  height:200px;
                  overflow: hidden;
                  position: absolute;
                  left: 0;
                  top: 0;
                  z-index: 100;
                  background: rgba(51,51,51,0.6);
                  img{
                    width: 400px;
                    height: 400px;
                  }
                }
              }
              &.classic-bottom{
                top: 200px;
                transform: rotateX(270deg);
                transform-origin: top;
                .classic-mask{
                  position: absolute;
                  left: 0;
                  top: 0;
                  z-index: 100;
                  background: rgba(78,189,213,0.75);
                  color: #ffffff;
                  text-align: center;
                  h6{
                    font-size: 14px;
                    padding: 30px 20px 10px 20px;
                    font-family: 'PingFang-SC-Bold';
                    font-weight: bold;
                  }
                  p{
                    font-family: 'PingFang-SC-Medium';
                    font-size: 12px;
                    padding:0 20px;
                    line-height: 20px;
                    text-align: left;
                    height: 80px;
                    margin-bottom: 15px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 4;
                    overflow: hidden;
                    letter-spacing: 0px;
                  }
                  span{
                    font-size: 12px;
                    border: solid 1px #ffffff;
                    border-radius: 15px;
                    padding: 4px 18px;
                  }
                }
              }
            }
            &:hover{
              transform: rotateX(90deg);
              transform-origin: top;
              transition: 0.3s;
            }
          }
          &:nth-of-type(1){
            border-radius: 10px 0 0 0;
          }
          &:nth-of-type(6){
            border-radius: 0 10px 0 0;
          }
          &:nth-of-type(7){
            border-radius: 0 0 0 10px;
          }
          &:nth-of-type(12){
            border-radius: 0 0 10px 0;
          }
          &:nth-of-type(3){
            .cur{
              .classic-front{
                .classic-mask{
                  img{
                    transform: translate(50%,50%);
                    margin-left: -100%;
                    margin-top: -100%;
                  }
                }
              }
            }
          }
          &:nth-of-type(4){
            .cur{
              .classic-front{
                .classic-mask{
                  img{
                    transform: translate(-50% ,50%);
                    margin-left: 0;
                    margin-top: -100%;
                  }
                }
              }
            }
          }
          &:nth-of-type(9){
            .cur{
              .classic-front{
                .classic-mask{
                  img{
                    transform: translate(50% ,-50%);
                    margin-left: -100%;
                    margin-top: 0;
                  }
                }
              }
            }
          }
          &:nth-of-type(10){
            .cur{
              .classic-front{
                .classic-mask{
                  img{
                    transform: translate(-50% ,-50%);
                    margin-left: 0;
                    margin-top: 0;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .contactUs{
    width: 100%;
    height: 670px;
    min-width: 1200px;
    background: #eeeeee;
    .inner{
      position: relative;
      width: 1200px;
      margin: 0 auto;
      p{
        &:first-of-type{
          font-size:52px;
          font-family:PingFang-SC-Bold;
          font-weight:bold;
          color:rgba(51,51,51,1);
          padding-top: 80px;
        }
        &:last-of-type{
          font-size:28px;
          font-family:PingFang-SC-Bold;
          font-weight:bold;
          color:rgba(102,102,102,1);
          line-height:100px;
        }
      }
      .left{
        position: absolute;
        top: 220px;
        left:0;
        width: 700px;
        /deep/.el-input{
          width: 560px;
          height: 70px;
          margin-top: 30px;
          .el-input__inner{
            width: 560px;
            height: 70px;
            border-radius: 35px;
            font-size: 18px;
            padding: 0 30px;
            color: #333333;
            &::placeholder{
              color: #999999;
            }
            &:focus{
              border-color: #4EBDD5;
            }
          }
        }
        .save{
          margin: 30px 0;
          border: none;
          width:240px;
          height:70px;
          background:rgba(78,189,213,1);
          border-radius:35px;
          color: #ffffff;
          font-size: 18px;
          outline: none;
        }
        span{
          padding-left: 30px;
          font-size:18px;
          font-family:PingFang-SC-Bold;
          color:rgba(153,153,153,1);
          line-height:100px;
        }
      }
      .right{
        position: absolute;
        top:220px;
        right: 0;
        width: 230px;
        text-align: center;
        img{
          width: 118px;
          height: 118px;
        }
        p{
          padding: 0;
          line-height: 1;
          margin-top: 30px;
          font-size:32px;
          font-family:PingFang-SC-Bold;
          font-weight:bold;
          color:rgba(51,51,51,1);
        }
      }
    }
  }
}
</style>
